<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item v-if="getChildern(item).length == 0"
                    :index="item.f_ModuleId"
                    @click="open(item)"
                    :key="item.f_ModuleId"
                    >
        <i :class="item.f_Icon"></i>
        <span slot="title"
              :alt="item.f_ModuleId">{{$t(item.f_FullName)}}</span>
      </el-menu-item>
      <el-submenu v-else
                  :index="item.f_ModuleId"
                  :key="item.f_ModuleId"
                  :popper-class="appConfig.theme.nav !='side'?'sidebar-more-menu': 'sidebar-more-menu-side'">
        <template slot="title">
          <i :class="item.f_Icon"></i>
          <span slot="title"
                :class="{'el-menu--display':collapse && first}">{{$t(item.f_FullName)}}</span>
        </template>
        <template v-for="(child) in getChildern(item)">
          <el-menu-item :index="child.f_ModuleId"
                        :key="child.f_ModuleId"
                        @click="open(child)"
                        v-if="validatenull(getChildern(child))"
                        >
            <i :class="child.f_Icon"></i>
            <span slot="title">{{$t(child.f_FullName)}}</span>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="child.f_ModuleId"
                        :collapse="collapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  name: "sidebarItem",
  data () {
    return {
    }
  },
  props: {
    menu: {
      type: Array
    },
    first: {
      type: Boolean,
      default: false
    },
    collapse: {
      type: Boolean
    }
  },
  created () { },
  mounted () { },
  computed: {
    ...mapGetters(["modulesGroup"])
  },
  methods: {
    getChildern(item){
      const _modules = this.modulesGroup[item.f_ModuleId] || []
      const res = _modules.filter(item =>{
        if(item.f_EnabledMark == 1 && item.f_IsMenu == 1){
            if(this.loginInfo.f_SecurityLevel == 1){
              return true
            }
            else{
              const moduleAuthIds = this.loginInfo.moduleAuthIds || []
              if(moduleAuthIds.indexOf(item.f_ModuleId) > -1){
                return true
              }
              else{
                return false
              }
            }
        }
      })
      return res
    },
    validatenull (val) {
      return this.$validatenull(val)
    },
    open (item) {
      this.$router.$lrRouter.goto(item)
    }
  },
}
</script>

